<template>
  <div class="app-container">
    <el-container>
      <el-menu
        default-active="manager"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="navigator"
      >
        <el-menu-item index="admin">
          <i class="el-icon-user-solid"></i>
          <span slot="title">管理员管理</span>
        </el-menu-item>
        <el-menu-item index="banner">
          <i class="el-icon-picture"></i>
          <span slot="title">广告管理</span>
        </el-menu-item>
        <el-menu-item index="users">
          <i class="el-icon-s-custom"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="apply">
          <i class="el-icon-s-check"></i>
          <span slot="title">申请管理</span>
        </el-menu-item>
        <el-menu-item index="address">
          <i class="el-icon-position"></i>
          <span slot="title">地址管理</span>
        </el-menu-item>
        <el-menu-item index="order">
          <i class="el-icon-tickets"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <!-- <el-menu-item index="message">
          <i class="el-icon-message-solid"></i>
          <span slot="title">消息管理</span>
        </el-menu-item> -->
        <el-menu-item index="notice">
          <i class="el-icon-edit-outline"></i>
          <span slot="title">公告管理</span>
        </el-menu-item>
        <el-menu-item index="suggest">
          <i class="el-icon-chat-line-round"></i>
          <span slot="title">建议管理</span>
        </el-menu-item>
      </el-menu>
      <el-container>
        <el-header class="header">
          <div class="userStatus">
            <div class="right-align">
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{ adminInfo.username
                  }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>安全设置</el-dropdown-item>
                  <el-dropdown-item @click.native="exit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-avatar size="medium" :src="adminInfo.avatar"></el-avatar>
            </div>
          </div>
        </el-header>
        <el-main class="main-content">
          <!-- 二级路由出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adminInfo: "",
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.adminInfo = JSON.parse(sessionStorage.getItem("adminInfo"));
      // console.log(this.adminInfo);
    },
    // 退出登录
    exit() {
      // console.log(111111111111111)
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("adminInfo");
      this.$router.push("/");
    },
    // 二级路由跳转
    navigator(index) {
      // console.log(index);
      this.$router.push("/home/" + index);
    },
  },
};
</script>

<style scoped>
/* 整体页面容器样式 */
.app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* 左侧菜单样式 */
.el-menu {
  min-width: 200px;
  border-right: 1px solid #444;
}
.el-menu-item {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding-left: 20px;
  transition: all 0.3s ease;
}
.el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* 头部样式 */
.header {
  background-color: #444;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userStatus {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.right-align {
  display: flex;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: white;
}
.el-avatar {
  margin-left: 10px;
}

/* 主体内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px;
}

/* 二级路由展示区域样式 */
.router-view {
  background-color: #f8f9fa;
  min-height: calc(100vh - 60px); /* 根据头部高度调整，减去头部占用的高度 */
  border-radius: 5px;
  padding: 20px;
}
</style>